<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        button {
            margin:20px;
        }
		#div1{
		    position: fixed;
		}
    </style>
</head>
<body onload="showRole();">
    <div id="canvasDiv" style="width:100%; height:652px; display:flex; justify-content:center;">
        <canvas id="myCanvas" width="1000" height="650" style="border: black 1px solid; margin-top:2px; ">
            你的浏览器不支持canvas，请跟换其他浏览器试一试。
        </canvas>
		<div id="div1">
			<img src=".\img\icon03.png" id="genguin" style="display: none;">
		</div>
    </div>
    <div id="buttonDiv" style="width:100%; display:flex; justify-content:center;">
       <button onclick="pendulum();">钟摆</button><button onclick="goCos();">余弦</button><button onclick="freeFall();">自由落体</button>
    </div>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image=document.getElementById("genguin");
	var speed = 5;
	var startPoint = 2;
	var startTowards = 0;
	var nowPosX = 3;
	var nowPosY = 325;
	var nowTowards = startTowards;
	var gameLoop;
    function showRole() {
             context.drawImage(image, 5, 5);
         }
    var r = 250;
    var createArc = function(attrs) {
		context.save();
		context.beginPath();
		context.fillStyle = attrs.color;
		context.arc(attrs.x, attrs.y, attrs.r, 0, Math.PI*2);
		context.closePath();
		context.fill();
		context.restore();
	};
    function pendulum(){
		if (gameLoop != null) clearInterval(gameLoop);
		var minAngle = 0;
		var maxAngle = Math.PI;
		var addAngle = Math.PI/24;
		var angle = minAngle;
		var mode = "left";
		gameLoop = setInterval(function() {
		var y = Math.sin(angle)*r+200;
		var x = Math.cos(angle)*r+250;
		var rds=20;
		switch(mode) {
			case "left":
			  context.clearRect(0, 0, innerWidth, innerHeight);
			  createArc({x: x, y: y,r:rds,color:"white"});
			  context.drawImage(image,x,y)
			  angle += addAngle;
				if(angle > maxAngle) {
					mode = "right";
					angle -= addAngle;
					return;
					}
			  break;
			case "right":
			  context.clearRect(0, 0, innerWidth, innerHeight);
			  createArc({x: x, y: y,r:rds,color:"white"});
			  context.drawImage(image,x,y)
			  angle -= addAngle;
			  if(angle < minAngle) {
				   mode = "left";
				   angle += addAngle;
				   return;
				   }
			  break;
			  }
		}, 50);
   }
   function goCos() {
   			if (gameLoop != null) clearInterval(gameLoop);
			context.clearRect(0, 0, innerWidth, innerHeight);
   			nowTowards = startTowards;
   			nowPosX = 3;
            gameLoop = setInterval(function() {moveCos();}, 200);
           }
	function moveCos() {
		if (nowPosY > 960) {
			clearInterval(gameLoop);
		} else {	
			nowTowards += Math.PI/20;
			nowPosY = 325 - Math.sin((nowPosX-3)*Math.PI/240)*200;
			context.translate(nowPosX, nowPosY);
			var deltAngle;
			deltAngle = Math.atan(Math.cos((nowPosX-3)*Math.PI/240));
			context.rotate((Math.PI/2)-deltAngle);
			context.drawImage(image, -16, -16);
			context.rotate(deltAngle-(Math.PI/2));
			context.translate(-nowPosX, -nowPosY);
			nowPosX += 12;
		}	
	}	
	function freeFall() {
		if(image.style.display="none"){
			image.style.display="block";
			}
			var div1=document.getElementById("div1");
			var div2=document.getElementById("canvasDiv");
			if (gameLoop != null) clearInterval(gameLoop);
			context.clearRect(0, 0, innerWidth, innerHeight);
			var speed=0;
			div1.style.top=0;
			gameLoop=setInterval(function(){
				speed+= 3;
				var T = div1.offsetTop + speed;
				while( T > div2.offsetHeight - div1.offsetHeight){
					T = div2.offsetHeight - div1.offsetHeight;
					speed *= -1;
					speed *= 0.75;
				}
				div1.style.top=T+'px';
			}, 30)
		}
  </script>
 </body>
</html>